<template>
  <div class="writer-article-wrap" >
    <div class="head-title">
      <span class="home-page">首页</span>
      <i class="separate-line"></i>
      <div class="writeInfo-div">
        <span>写问题</span>
      </div>
      <div class="public-div">
        <button class="button-primary" @click="publcArticle()">发 布</button>
      </div>
    </div>
    <div class="content-div">

      <div class="topic-swap">
        <el-select v-model="topic.selectValues" multiple placeholder="请选择话题分类">
          <el-option
            v-for="item in topic.topicClassification"
            :key="item.uuid"
            :label="item.topicinfo"
            :value="item.uuid">
          </el-option>
        </el-select>
      </div>
      <div class="title">
        <input placeholder="请输入文章标题" v-model="title">
      </div>

      <div class="editStyle">
        <quill-editor
          v-model="content"
          ref="myQuillEditor"
          :options="editorOption"
          @change="onEditorChange($event)">
        </quill-editor>
      </div>
    </div>
  </div>
</template>

<script>
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction
    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],
    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],
    ['link', 'image'],
    ['clean']
  ]
  export default {
    name: "writeArticle",

    data() {
      return {
        quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
        content: null,
        title:"",
        uuid:"",
        topic:{
          topicClassification:[],
          selectValues:[]
        },
        editorOption: {
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        serverUrl: '/manager/common/imgUpload',  // 这里写你要上传的图片服务器地址
        header: {
          // token: sessionStorage.token
        } // 有的图片服务器要求请求头需要有token
      }
    },
    created:function(){
      this.initTopicSelectOptions();
    },
    methods: {
      onEditorChange({editor, html, text}) {//内容改变事件
        this.content = html
      },
      beforeUpload() {     // 显示loading动画
        this.quillUpdateImg = true
      },
      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        console.log(res);
        let quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.code == 200 ) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.url)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      },
      publcArticle:function () {
        this.$axios({
          method:"post",
          url:"/solvePlat/workInfo/saveWorkInfo",
          data:{
            content:this.content,
            title:this.title,
            uuid:this.uuid,
            topicClassification:this.topic.selectValues
          }
        }).then(res=>{
          if (res.data.success === true){
            this.uuid = res.data.data;
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          }else{
            this.$message.error({
              message: res.data.msg
            });
          }
        })
      },
      initTopicSelectOptions:function () {

        this.$axios({
          method: "get",
          url:"/solvePlat/topicClassification/selectClassification",
        }).then(res=>{
          if (res.data.success === true){
            this.topic.topicClassification = res.data.data.list;
          } else{
            this.$message.error({
              message: res.data.mes
            })
          }
        })
      }
      
    }
  }

</script>

<style scoped>
  .editStyle{
    width: 660px;
    margin: 0 auto;
    height: 1000px;
  }
  .title{
    width: 660px;
    margin: 15px auto 15px;
  }
  .title input{
    width: 99.4%;
    height: 39px;
    border: solid 1px #3a345342;
    font-size: 20px;
  }

  .head-title{
    width: 800px;
    margin: 0px auto;
  }

  .writeInfo-div{
    display: inline-block;
    font-size: 16px;
    font-weight: 100;
  }

  .public-div{
    margin-left: 77%;
    display: inline-block;
  }
  .home-page{
    font-size: 18px;
    font-weight: 600;
  }
  .separate-line{
    height: 29px;
    width: 2px;
    background-color: #ebebeb;
    margin-left: 17px;
  }
  .writer-article-wrap{
    margin-top: 20px;
  }
  .content-div{
    border-top: solid #f0f0f0 2px;
    width: 90%;
    margin: 20px auto 0px;
  }
  .quill-editor{
    height: 1000px;
  }

  .button-primary {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
  }

  .topic-swap{
    margin: 15px auto;
    width: 660px;

  }
  .el-select{
    width: 660px!important;
  }
</style>
